<script>
import { useRoute, useRouter } from 'vue-router';
export default {
    inject: ["$http"],
    data() {
        return {
            route: useRoute(),
            router: useRouter(),
            obj: {},
            newobj: {
                name: "",
                principal: "",
                principal_tel: "",
                tel: ""
            }
        }
    },
    methods: {
        async getDetail() {
            
            const result = await this.$http.get(`/dep/${this.route.params.id}`)
            console.log(result.data.data);
            if(result.data.data!=null){
                this.obj = result.data.data
            }else{
                alert("部门不存在")
            }
            
        },
        goBack() {
            this.router.go(-1)
        },
       async update() {
            this.newobj.name = this.obj.name
            this.newobj.principal = this.obj.principal
            this.newobj.principal_tel = this.obj.principal_tel
            this.newobj.tel = this.obj.tel
            console.log(this.newobj)
            await this.$http.put(`/dep/${this.route.params.id}`,this.newobj)
            this.router.go(-1)
        }
    },
    mounted() {
        this.getDetail()
    }
}
</script>
<template>

    <div class="form">
        <label for="">
            id: <input type="text" v-model="obj.id">
        </label>
        <label for="">
            部门名称: <input type="text" v-model="obj.name">
        </label>
        <label for="">
            负责人: <input type="text" v-model="obj.principal">
        </label>
        <label for="">
            负责人电话: <input type="text" v-model="obj.principal_tel">
        </label>
        <label for="">
            部门电话: <input type="text" v-model="obj.tel">
        </label>
        <label for="">
            <button @click="update">更新</button>
            <button @click="goBack">返回</button>
        </label>


    </div>

</template>
<style>
.form {
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
</style>